<template>
  <div class="container">
    <div class="header">
      <img src="@/assets/menu/pc_new_logo.png" alt="">
    </div>
    <div class="content">
      <div class="head">
        <span @click="gohome">首页</span>
        <span> > </span>
        <span>房屋信息</span>
      </div>
      <div class="house-information">
        <p>{{list.houseTitle}}</p>
        <span class="housetype">户型方正，采光良好，格局好</span>
        <div class="housemassage">
          <div class="left">
            <el-carousel :interval="2000" arrow="always" height="355px">
              <el-carousel-item v-for="item in banner" :key="item.id">
                <img :src="item" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="right">
            <div class="money">
              {{list.price}}
              <span>元/日</span>
            </div>
            <div class="message">
              <div>所在城市：
                <span>{{list.houseAddress}}</span>
              </div>
              <div>小区名称：
                <span>
                  {{list.communityName}}
                </span>
              </div>
              <div>联系电话：
                <span> {{list.publisherPhone}}</span>
              </div>
            </div>
            <div class="details">
              <div>
                <span> {{list.houseModel}}</span> 规模
              </div>
              <div>
                <span> {{list.houseArea}}平米</span> 建筑面积
              </div>
              <div>
                <span> {{list.houseOriented}}</span> 朝向
              </div>
            </div>
            <div class="reservation">
              <div @click="getViewComments()">咨询</div>
              <div @click=" dialogFormVisible = true">立即预定</div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="入房登记" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="form" label-width="160px">
          <el-form-item label="姓名">
            <el-input v-model="form.uname" autocomplete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证">
            <el-input v-model="form.idCard" autocomplete="off" placeholder="请输入身份证" maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.phone" autocomplete="off" placeholder="请输入手机号" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="日期" class="elselect">
            <el-date-picker v-model="form.checkInTime" value-format="yyyy-MM-dd" type="date" placeholder="选择入住日期" w>
            </el-date-picker>
            -
            <el-date-picker v-model="form.checkOutTime" value-format="yyyy-MM-dd" type="date" placeholder="选择退房日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false, paymentdialogFormVisible = true">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="扫码付款" :visible.sync="paymentdialogFormVisible" width="40%">
        <el-form class="qrcode">
          <img src="@/assets/menu/二维码.jpg" alt="">
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="paymentdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getbooking()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 留言 -->
      <el-dialog title="留言对话" :visible.sync="consultationdialogFormVisible" width="40%">
        <el-form :model="consuform" label-width="240px">
          <el-input v-model="consuform.message" placeholder="请输入留言" class="consuform" type="textarea"></el-input>
          <div class="consu" v-for="item in message" :key="item.id">{{item.username}}
            <div class="consumessage">
              <span>{{item.message}}</span>
              <span>{{item.createDate}}</span>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="consultationdialogFormVisible = false"> 取 消</el-button>
          <el-button type="primary" @click="sendmessage()">发 送 留 言</el-button>
        </div>
      </el-dialog>
      <div class=" introduction">简介：
        <div style="text-indent:2em;">
          {{list.houseDesc}}
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import { getBookingAPI, getViewCommentsAPI, getSendmessageAPI } from '@/api/Home/getHomeAPI'
import request from '@/untils/request'
export default {
  name: 'HouseRentAnroll',

  data() {
    return {
      list: [],
      banner: [],
      // 留言
      message: [],
      // 用户ID
      id: localStorage.getItem('id'),
      houseid: '',
      // 订单住房
      dialogFormVisible: false,
      // 付款码
      paymentdialogFormVisible: false,
      // 留言
      consultationdialogFormVisible: false,
      form: {
        uname: '',
        price: '',
        phone: '',
        idCard: '',
        checkInTime: '',
        checkOutTime: '',
        userId: localStorage.getItem('id'),
        houseId: this.$route.params.id
      },
      consuform: {
        message: '',
        userId: localStorage.getItem('id'),
        // userId: 38,
        houseId: this.$route.params.id
      },
      value1: ''
    }
  },
  methods: {
    gohome() {
      this.$router.go(-1)
    },
    async getHouseInfo() {
      let { data: res } = await request.get(`/house/findById/${this.$route.params.id}`)
      this.list = res.data
      this.banner = res.data.imgs
      this.form.price = res.data.price
    },
    // 发送下单请求
    async getbooking() {
      this.paymentdialogFormVisible = false
      let { data: res } = await getBookingAPI(this.form)
      if (res.code === 20011) {
        this.$message({
          message: '完成扫码付款，下单成功',
          type: 'success'
        })
        this.$router.go(-1)
      } else {
        this.$message.error('付款失败，请重新扫码付款')
      }
    },
    // 查看留言
    async getViewComments() {
      this.consultationdialogFormVisible = true
      let params = {
        houseId: this.$route.params.id
      }
      let { data: res } = await getViewCommentsAPI(params)
      this.message = res.data.messages
    },
    // 发送留言
    async sendmessage() {
      let { data: res } = await getSendmessageAPI(this.consuform)
      if (res.code === 20011) {
        this.$message({
          message: '留言成功',
          type: 'success'
        })
        this.getViewComments()
      }
    }
  },
  created() {
    this.getHouseInfo()
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-bottom: 5px solid #ff9180;
  width: 100%;
  height: 60px;
  z-index: 1;
}
.head {
  color: #bfbfbf;
}

.content {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  height: 40em;
  width: 1200px;
  margin: auto;
  background: #fff;
  padding: 30px;
  padding-bottom: 0;
  margin-top: 50px;
}
.house-information {
  max-width: 70em;
  margin: auto;
  margin-top: 50px;
}
.housetype {
  font-size: 10px;
  color: #bfbfbf;
  margin-left: 10px;
}
.house-information p:nth-child(1) {
  font-size: 30px;
  font-weight: 700;
  margin-top: 10px;
  margin-left: 10px;
}
.housemassage {
  display: flex;
}
.house-information .left {
  width: 600px;
  height: 450px;
}
.left img {
  width: 100%;
  height: 100%;
}
.right {
  margin-left: 10px;
  width: 45%;
}
.right .money {
  width: 100%;
  font-size: 50px;
  color: #ff9180;
  border-bottom: 1px solid;
}
.message {
  border-bottom: 1px solid #ff9180;
}
.message div {
  color: #bfbfbf;
  font-size: 20px;
  margin: 20px;
}
.message span {
  color: black;
}
.money span {
  font-size: 10px;
}
.details {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ff9180;
  margin: 20px;
}
.details div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 10px;
  color: #bfbfbf;
}
.details span {
  color: black;
  font-size: 25px;
  font-weight: 700;
}
.reservation {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
.reservation div {
  width: 200px;
  height: 2em;
  text-align: center;
  color: #fff;
  background: #ff9180;
  border-radius: 5px;
  line-height: 2em;
}
.introduction {
  margin-top: 10px;
  width: 100%;
  height: 150px;
}
.el-input {
  width: 350px;
}
.elselect /deep/ .el-range-separator {
  width: 24px;
}
.qrcode {
  margin: auto;
  width: 300px;
  height: 300px;
}
.qrcode img {
  width: 100%;
  height: 100%;
}
.consuform {
  width: 100%;
  font-size: 30px;
}
.consu {
  margin: 10px 10px 10px 10px;

  border-radius: 5px;
  font-size: 20px;
}
.consumessage {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 20x;
}
</style>
